Las propidades margin y padding

Con frecuencia nos confundimos con las propiedades margin y padding y es que suenan parecido pero tienen distinta función.

Con margin establecemos la distancia entre los lados de un elemento, es el espacio que está fuera del borde.

Cuando hablamos de padding lo que establecemos es la distancia que está entre el contenido y el borde o por diferenciarlo mejor es lo que llamaríamos el relleno.

Los valores pueden ser auto, cm, mm, in,pt, pc, px, em, ex.

- em (ems, la altura de la fuente de los elementos0
- ex (x-height, altura de la letra "x")
- px (pixels, relativa a la resolución del lienzo)
- in (pulgadas; 1 pulgada=2.54 cm)
- cm (centímetros; 1 cm = 10 mm)
- mm (milímetros)
- pt (puntos; 1pt = 1/72 pulgada)
- pc (picas; 1 pc = 12 pt)

Para añadir distancia en la parte superior de un elemento lo establecemos con margin-top, si la distancia es en la parte inferior lo haremos con margin-bottom. Cuando deseamos dejar más espacio a la izquierda margin-left y si es a la derecha con margin-right.

Dicho así podemos establecer unos márgenes imaginarios de la siguiente forma:
margin-top:5px;
margin-bottom:5px;
margin-right:10px;
margin-left:10px;

Para establecer las propiedades margin-top, margin-right, margin-bottom y margin-left en un mismo sitio simplificamos con margin y se especifican cuatro valores de longitud: margin: 5px 10px 5px 10px;

Tendremos en cuenta que los valores los añadimos en el siguiente orden
Arriba(top) Derecha(right) Abajo(bottom) Izquierda(left)

Si como valor tuviéramos 0 en margen simplemente lo añadimos sin especificar los píxeles. Un ejemplo sería 0 píxeles en la parte inferior (bottom) margin: 5px 10px 0 10px;

- Un solo valor: Se aplica a todos los lados, margin: 5px; será la misma distancia a los cuatro lados.

- Dos valores: El primero se aplica arriba y abajo y el segundo a izquierda y derecha, margin: 5px 10px; (5px sería arriba y abajo, 10px izquierda y derecha

- Tres valores: El primero arriba, el segundo a la derecha y a la izquierda y el tercero abajo, margin: 5px 10px 15px; (5px sería arriba, 10px izquierda y derecha y tercero abajo)

- Cuatro valores: El primero arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda, margin: 5px 15px 15px 10px;

Si tuviéramos la misma medida para todos los lados sería suficiente añadiendo margin: 0 auto; eso centraría el elemento.

La propiedad padding establece los valores de la misma forma que margin con la diferencia que en padding los valores no pueden ser negativos.
padding-top, padding-right, padding-bottom,  padding-left.

Elemento sin propiedad de relleno (padding)

Con padding:20px 60px;